$(function(){
  /*==========================服务介绍===================================*/ 
  var IconsPicked = ['../images/Delicacy-picked.png','../images/Desserts-picked.png','../images/fruit-picked.png','../images/Supermarket-picked.png']
  var IconsNopicked = ['../images/Delicacy-nopick.png','../images/Desserts-nopick.png','../images/fruit-nopick.png','../images/Supermarket-nopick.png']
  var typesImg = ['../images/delicacy.png','../images/desserts.png','../images/fresh.png','../images/supermarket.png']
 
  var imgIndex=1;
    $('.types li').on('mouseover',function(){
      $('.types li').find('.down').css('color',"#000000")   
      $(this).find('.down').css('color',"#FFBA1E")
      var pickedIndex= $(this).parent().find('.picked').parent().parent().attr('data-index')
       $(this).parent().find('.picked').parent().parent().find('img').attr('src',IconsNopicked[pickedIndex])
       $(this).parent().find('.now-before').removeClass('now-before')
       $(this).parent().find('.picked').removeClass('picked')
       var currentIndex = $(this).attr('data-index')
       $(this).children().find('img').attr('src',IconsPicked[currentIndex])
       $('.iphone-images').css('background','url('+typesImg[currentIndex]+')').css('background-size','cover')
       $(this).find('.up').addClass('picked')
       $(this).children().find('.down-before').addClass('now-before')
       imgIndex=currentIndex;
    })
    function autoSwitch(){
     
      $('.iphone-images').css('background','url('+typesImg[imgIndex]+')').css('background-size','cover')
      $('.types li').find('.picked').parent().parent().find('img').attr('src',IconsNopicked[imgIndex])
      $('.types li').find('.now-before').removeClass('now-before')
      $('.types li').find('.down').css('color',"#000000")   
      $('.types li').parent().find('.picked').removeClass('picked')
      $('.types li').eq(imgIndex).children().find('img').attr('src',IconsPicked[imgIndex])
      $('.types li').eq(imgIndex).find('.up').addClass('picked')
      $('.types li').eq(imgIndex).children().find('.down-before').addClass('now-before')
      $('.types li').eq(imgIndex).find('.down').css('color',"#FFBA1E")
      imgIndex++;
      if(imgIndex==4) imgIndex=0
 
    }
    var timeId2 = setInterval(autoSwitch,3000)
  $('.types').on('mouseover',function(){
    clearInterval(timeId2)
  })
  $('.types').on('mouseout',function(){
     timeId2= setInterval(autoSwitch,3000) ;
  })
  $('.entrance li').on('mouseover',function(){

  })
  /*==========================优秀合作案例===================================*/ 
    var case_info ={
         "cases":[
                     {  "title":"美团服务市场",
                         "content":"米线面馆接入经营助手服务,收入增幅51.52%",
                         "details":"开一家店有多操心？加盟、选址、经营、管理到真正赚钱，期间的辛苦只有每家店老板才深有体会。美团服务市场聚集垂直领域优质服务商，打造一站式服务生态！从新店开业到老店升级、从店铺装修到营销托管、从食材供应到金融服务等，为所有商家提供店铺经营全方位服务，解决经营所遇难题，助力轻松做生意。",
                         "image" :"../images/story1.jpg",
                         "href":"#"
                        },
                        {
                            "title":"订了么外卖骑手人物：李康佳",
                         "content":"平凡之路上的英雄梦",
                         "details":"我觉得自从成了美团众包骑手之后，遇到了很多有趣新奇的人和事。以前我的生活比较单调，上班、回家两点一线。加入美团众包后，认识了许多朋友，帮助了一些人也得到了一些人的帮助。美团众包，为我的生活打开了一扇新的大门。我喜欢它的弹性、自由，让我对生活有了更多的掌控……",
                         "image" :"../images/story3.jpg",
                         "href":"#"
                        },
                        {
                        "title":"订了么外卖骑手人物：纪轩",
                         "content":"为减肥而成为订了么兼职骑手，后成功减肥",
                         "details":"纪轩是11位骑手中的一位，来自江苏镇江，他近三个月的准时率平均达到了99.9%，满意度100。当问到他知道自己可以去俄罗斯看世界杯时是什么心情，李君说接到电话刚开始不敢相信，后来反应过来就直接飞奔回家拿上身份证就去办加急护照了。开心激动的心情久久难平复……",
                         "image" :"../images/story2.jpg",
                         "href":"#"
                        }

         ]
    }
   var cases = document.getElementById('case')
    var strLis = ''
    for (var i = 0; i < 3; i++) {
        strLis += ` <li> 
                 <div class="content" >
                        <div class=" content_info">
                           <h3>${case_info.cases[i].title} </h3>
                          <h2>${case_info.cases[i].content} </h2>
                          <p>${case_info.cases[i].details}</p>
                          <div class="more"><a href="${case_info.cases[i].href}">查看详情</a></div>
                           </div>
                        </div>
                     <div class="image">
                         <img src="${case_info.cases[i].image}">
                     </div>
                    </li>`
    }
    cases.innerHTML = strLis;
    var ul= $('.main_content>ul');
var main_content= $('.main_content');

 var oneWidth = main_content.find("ul li").eq(0).width();
  var sw = 0;   
   var list = $('.list ul li');
list.on('click',function(){	
    $(this).parent().find('.active').removeClass('active');
    $(this).addClass('active');
       sw = $('.list ul ').find('.active').index();
   
         ul.animate({'right':oneWidth*sw});   
    });
function right(){

var index = $('.list ul ').find('.active').index();
  sw++;
 if(sw==list.length){sw=0;}
 list.eq(sw).trigger('click');

}
var timeId = setInterval(right,3000);
$('.right').on('click',right);
$('.left').on('click',function(){
 sw--;
if(sw==-1){sw=list.length;}
list.eq(sw).trigger('click');
});
$('.content').on('mouseover',function(){
  clearInterval(timeId)
})
$('.content').on('mouseout',function(){
     timeId = setInterval(right,3000);
  })
  $('.right').on('mouseover',function(){
    clearInterval(timeId)
  })
  $('.left').on('mouseover',function(){
    clearInterval(timeId)
  })
  $('.left').on('mouseout',function(){
       timeId = setInterval(right,2000);
    })
    $('.right').on('mouseout',function(){
        timeId = setInterval(right,2000);
     })
/*==========================媒体新闻报道===================================*/ 
var news_info ={ 
   "info":[ {  "title":"保障骑手安全无忧送餐路订了么外卖首发《骑手安全...",
                 "details":"随着大众餐饮消费升级，外卖行业迅速发展。数据显示，2017年订了么外卖订单量突破2100万单，稳居行业第一，沉积背后离不开...",
                 "url":"../images/news1.jpg",
                 "content":"保障骑手安心无忧送餐路订了么外卖首发《骑手生活安全指南》",
                 "href":"#"
             },
          {      "title":"MINISO名创优品正式入驻订了么闪购时尚单品30分钟送达",
                   "details":"订了么闪购与设计品牌MINISO名创优品共同发布消息，双方即日起正式开展品牌合作，名创优品在北京、上海、广州、深圳四大城市...",
                   "url":"../images/news2.jpg",
                "content":"MINISO名创优品正式入驻订了么闪购时尚单品30分钟送达",
                "href":"#"
            },
            {
              "title":"专业食品安全监测团队进驻订了么点评从此舌尖安全有他...",
              "details":"外卖订餐平台对合作商户的食品安全检测力度再次加码。今日,订了么点评先后与检科测试集团有限公司、中农孚德检测技术(北京)有限公司",
              "url":"../images/news3.jpg",
              "content":"专业食品安全监测团队进驻订了么点评从此舌尖安全有他们守护",
              "href":"#"
            },
            {
              "title":"Trustdata发布2018上半年外卖份额数据订了么...",
              "details":"报告显示,美国外卖以59%的市场交易额领跑行业，相当于订了么与百度外卖市场交易额之和的1.5倍,互联网外卖行业呈现出明显...",
              "url":"../images/news4.jpg",
              "content":"Trustdata发布2018上半年外卖份额数据订了么百度",
              "href":"#"
            },
          
            {
              "title":"订了么上线闪购业务以“快”破局助力零售升级",
              "details":"7月18日1,美团点评举办“以快破局助力零售升级”2018订了么闪购发布会,正式上线订了么闪购业务,涵盖超市边里、生鲜蔬菜、鲜花...",
              "url":"../images/news5.jpg",
              "content":"订了么上线闪购业务以“快”破局零售升级",
                "href":"#"
            },
            {
              "title":"订了么城市新青年外卖骑手正能量图鉴",
              "details":"一个时代的性格,是青年代表的性格;一个时代的精神,是青年代表的精神。订了么外卖骑手群体正是一群努力学习提升自我,努力拼搏...",
              "url":"../images/news6.jpg",
              "content":"美团城市新青年外卖骑手正能量图鉴",
              "href":"#"
            }
          ]
}
 
var news = document.getElementById('new')
var strNews = ''
strNews+=` 
<li>
<img src="${news_info.info[5].url} ">
<h2>${news_info.info[5].title}</h2>
<div class="line"></div>
<p>${news_info.info[5].details}</p>
</li>
`
for (var i = 0; i < news_info.info.length; i++) {
    strNews += ` 
    <li>
    <img src="${news_info.info[i].url} ">
    <h2>${news_info.info[i].title}</h2>
    <div class="line"></div>
    <p>${news_info.info[i].details}</p>
    <div class="more"><a href="${news_info.info[i].href}">查看详情</a></div>
</li>
 `
}
strNews+=` 
<li>
<img src="${news_info.info[0].url} ">
<h2>${news_info.info[0].title}</h2>
<div class="line"></div>
<p>${news_info.info[0].details}</p>

</li>
`
news.innerHTML += strNews;
var news_list = document.getElementById('news_list')
strList=''
for(var i=0;i<news_info.info.length;i++){
  strList+=` <li>
              <span>${"0"+(i+1)}<div class="oblique"></div></span>
              <a href="${news_info.info[i].href}">${news_info.info[i].content}</a>
             
              </li>`
}
news_list.innerHTML+=strList;

  var index=1;//这是记录图片的索引，通过索引来控制图片的切换，
  // 注意是从1开始的   [1,size-2]
  var timer=null;//seInterval()函数会返回一个值，这是用来接收那个值的，可以用来停止轮播的效果
  var size=$('.info_details ul').children().size();//图片的张数
  var picHeight=$('.info_details ul li').height();//获取图片的宽度
  //鼠标移上去的时候图片轮播要暂停
  $('.info_details').mouseover(function(){
      clearInterval(timer);
  });
  //鼠标移走的时候再次开始
  $('.info_details').mouseleave(function(){
      autoSlide();
  });
  /*这里要调用这个函数。这里也是一个关键。
  因为当你点进这个页面以后不管你鼠标放在哪里，图片都是要动的吧。
  这样子写的意思就是触发这个.slide类的mouseover事件，
  而上面那个是给这个元素绑定事件*/
  $('.info_details ul').mouseleave();
  //自动播放
  function autoSlide(){
      timer=setInterval(function(){
          index++;
          changeImg();
          changeDots();
      },4000);
  };

  // 图片切换函数
  function changeImg(){   
      var slideHeight=-1*picHeight*index;
      $('.info_details ul').animate({
          'top':slideHeight+'px'
      },500);
      if(index>=size-1){
         
          $('.info_details ul').animate({'top':-picHeight+'px'},0);  
          index=1;
      }
      if(index<1){
         
          $('.info_details ul').animate({'top':-(size-2)*picHeight+'px'},0);
          index=size-2;
      }
  }
 
  function changeDots(){
     
      $('.navigation li').eq(index-1).addClass('hover').siblings().removeClass('hover');
           $('.current-index').text("0"+ $('.navigation li').eq(index-1).attr('data-index'));
  }
  //点击小圆点，切换到对应的图片
  $('.navigation li').click(function(event){
          var target=event.target;
          index=$(target).index()+1;
          changeImg();//改变图片
          changeDots();// 小圆点的状态也要跟着变
  });

$('.navigation li').mouseover(function(){
  clearInterval(timer);
});
//鼠标移走的时候再次开始
$('.navigation li').mouseleave(function(){
  autoSlide();
});
//   $('.news_list ul li').mouseover(function(){
   
//      $(this).children().eq(1).css('font-size','20px').css('color',"black");
//   });
//   $('.news_list ul li').mouseout(function(){
//     $(this).children().eq(1).css('font-size','16px').css('color',"#474242")
//  });

/*==========================整体页面动画效果===================================*/ 
var self = this;
var pagePosition = 0;
var timeId, news_timeId;
var clientHeight = document.documentElement.clientHeight;

var pageResize = function() {
    $(window).resize(function() {
        clientHeight = document.documentElement.clientHeight;
    });
};

 
  var animation = function(){
    $(window).scroll(function(){
      pagePosition = $(window).scrollTop() + clientHeight;
      console.log(pagePosition)
      /* 动画顺序：服务介绍 => 品类全覆盖 => 手机 => 列表*/
          if(pagePosition>1200){
            $('.service_title').css({
              "opacity": 1,
              "top": 90 + 'px'
          });
          }else{
            $('.service_title').css({
              "opacity": 0,
              "top": 140 + 'px'
          });
          }
          if(pagePosition>1400){
            $('.service-types').css({
              "opacity": 1,
              "top": 300 + 'px'
          });
          }else{
            $('.service-types').css({
              "opacity": 0,
              "top": 400 + 'px'
          });
          }
          if(pagePosition>1600){
            $('.types-images').css({
              "opacity": 1,
              "top": 250 + 'px'
          });
          }else{
            $('.types-images').css({
              "opacity": 0,
              "top": 300 + 'px'
          });
          }
      /*  合作案例 */
      if(pagePosition>1800){
        $('.case_title').css({
          "opacity": 1,
          "top": 90 + 'px'
      });
  } else {
      $('.case_title').css({
          "opacity": 0,
          "top": 140 + 'px'
      });
      }
   
      if (pagePosition > 2200) {
        $('.background').css({
            "opacity": 1,
            "top": 150 + 'px'
        });
        $('#arrow').css({
            "opacity": 1,
            "transition": "all 0.5s"
        })
    } else {
        $('.background').css({
            "opacity": 0,
            "top": 130 + 'px'
        });
    }

    if (pagePosition > 2250){
         $(".main_content").css({
            "opacity": 1,
            "top": 40 + 'px'
         });

    } else {
        $(".main_content").css({
            "opacity": 0,
            "top": 100 + 'px'
         });
    }
      // 媒体新闻报道
      if (pagePosition > 2700){
        $('.news_title').css({
            "opacity": 1,
            "top": 80 + 'px'
        });
    } else {
        $('.news_title').css({
            "opacity": 0,
            "top": 180 + 'px'
        });
    }
 
 if (pagePosition > 3100) {
  $('.news_info').css({
      "opacity": 1,
      "top": 0 + 'px'
  });
  $('.list_title').css({
      "opacity": 1,
      "top": 0 + 'px'
  });
  setTimeout(function(){
      $('.info_bg').css({
          "opacity": 1,
          "top": 40 + 'px',
          "transition": "all 1.3s"
      });
     }, 100);
  setTimeout(function(){
      $('.news_list').css({
          "opacity": 1,
          "top": 0 + 'px'
      });
     }, 300);
  
} else {
  $('.news_info').css({
      "opacity": 0,
      "top": 100 + 'px'
  });
  $('.list_title').css({
      "opacity": 0,
      "top": 100 + 'px'
  });
  setTimeout(function(){
      $('.info_bg').css({
          "opacity": 0,
          "top": 100 + 'px'
      });
     }, 100);
  $('.news_list').css({
      "opacity": 0,
      "top": 100 + 'px'
  });
}

    })

  }
  var addEvent = function() {
   
    animation();
  
};

addEvent();
})